<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>xxxx</title>
        <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
        <link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet"/>
        <link href="{{ asset('css/element.css') }}" rel="stylesheet"/>
        <link href="{{ asset('css/auth.css') }}" rel="stylesheet">
    </head>
    <body>
        <div class="container main">
            <div class="row">
                <div class="col-lg-12" id="app" v-cloak>
                    <script color="26,254,255" opacity="1" count="250" src="{{ asset('js/canvas-nest.js') }}" type="text/javascript" charset="utf-8"></script>
                    <div class="login-form">
                        <div class="login-title" style="line-height: 60px;font-size: 20px;text-align: center;">众人点点后台管理系统</div>
                       
                        <el-form :model="form" status-icon ref="form">
                            <el-form-item :rules="[{ required: true, message: '请填写管理员账号', trigger: 'blur'}]" prop="username">
                                <el-input prefix-icon="fa fa-user-o" type="text" placeholder="请填写管理员账号" v-model="form.username" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item :rules="[{ required: true, message: '请填写管理员密码', trigger: 'blur'}]" prop="password">
                                <el-input prefix-icon="fa fa-unlock-alt" type="password" v-model="form.password" placeholder="请填写管理员密码" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item :rules="[{ required: true, message: '请填写验证码', trigger: 'blur'}]" prop="captcha">
                                <el-input prefix-icon="fa fa-image" v-model.number="form.captcha" placeholder="请填写验证码" style="width: 230px"></el-input>
                                <img @click="captcha" class="login-captcha" :src="captchaLink">
                            </el-form-item>
                            <div class="refresh-captcha"><i class="fa fa-question-circle-o"></i> 看不清，点击验证码换一张</div>
                            <el-form-item>
                                <el-button type="primary" class="login-btn" :loading="buttonLoading"
                                           :disabled="formDisabled" @click="submitForm">@{{buttonTitle}}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="{{ asset('js/jquery-1.8.3.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/element.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function() {
                    return {
                        buttonLoading : false,
                        formDisabled : false,
                        buttonTitle : '登 录',
                        captchaLink: '',
                        form: {username: '', password: '', captcha: '',_token:"{{csrf_token()}}"},
                    }
                },
                created(){
                    this.captcha();
                    this.keyupSubmit();
                },
                methods: {
                    keyupSubmit(){
                        document.onkeydown=(event)=>{
                            if(event.keyCode === 13){
                                this.submitForm();
                            }
                        }
                    },
                    captcha(){
                        let that = this;
                        $.get("{{ route('admin.auth.captcha') }}",function(res){
                            that.captchaLink = res.data;
                        },'JSON ');
                    },
                    submitForm() {
                        this.$refs['form'].validate((valid) => {
                            if (valid) {
                                this.buttonLoading = true;
                                this.formDisabled = true;
                                this.buttonTitle = '登录中...';
                                let that = this;
                                $.post("{{ route('admin.auth.login') }}",this.form,function(res){
                                    that.buttonLoading = false;
                                    that.formDisabled = false;
                                    if(res.code){
                                        that.buttonTitle = '登 录';
                                        that.form.captcha = '';
                                        that.captcha();
                                        that.$message.error(res.msg);
                                    }else{
                                        that.$message({
                                            message: res.msg,
                                            type: 'success',
                                            duration: '1000',
                                            onClose:() =>{
                                                window.location.href = res.data;
                                            }
                                        });
                                    }
                                },'JSON ');
                            } else {
                                return false;
                            }
                        });
                    },
                }
            });
        })
    </script>
</html>
